<template>
  <div id="mainid" style="height:100%;width:100%;">
  </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    mounted() {
        this.indata()
    },
    methods: {
        indata(){
                var div = document.getElementById("mainid");                           
                var  dataModel = new ht.DataModel();
                console.log(dataModel)
                var graphView = new ht.graph.GraphView(dataModel);
                var view = graphView.getView();            
                view.className = 'main';
                div.appendChild(view);    
                window.addEventListener('resize', function (e) {
                    graphView.invalidate();
                }, false);  
                                   
                var node = createNode(150, 150);
                node.setSize(50, 50);
                node.setStyle('shape', 'circle');
                node.setStyle('shape.background', 'red');
                node.setStyle('shape.gradient', 'radial.center');                
                node.setStyle('label.max', 260);
                node.setStyle('label.position', 17);
                node.setStyle('label.font', '15px Arial'); 
                node.setStyle('note', 'Drag me to rotate label');                   

                var angle = Math.PI/3;
                node.setStyle('label.rotation', angle);

                graphView.getLabel = function(data){
                    if(data === node){
                        var p = data.getPosition();
                        return 'Position x:' + p.x + ', y:' + p.y + ', Pretty long long long long long label';                        
                    }
                    return data.getName();
                };       
                
                graphView.addInteractorListener(function(e){
                    if(graphView.isSelected(node) && e.kind === 'betweenMove'){
                        angle -= Math.PI/20;
                        node.setStyle('label.rotation', angle);
                    }                    
                });
                
               var n1 = createNode(500, 100, 'source');               
               var n2 = createNode(300, 200, 'target');   
               var n3 = createNode(800, 100, 'source');  
               var n4 = createNode(600, 200, 'target');  
                
                createEdge(n1, n2, 'HT', 'yellow');
                createEdge(n1, n2, 'HT for Web', 'yellow');
                createEdge(n1, n2, 'www.hightopo.com', 'yellow');
                
                createEdge(n3, n4, 'HT', 'pink', true);
                createEdge(n3, n4, 'HT for Web', 'pink', true);
                createEdge(n3, n4, 'www.hightopo.com', 'pink', true);     
                 
            function createNode(x, y, name){
                var node = new ht.Node();
                node.setPosition(x, y);
                node.setName(name);
                dataModel.add(node);
                return node;
            }
                 
            function createEdge(n1, n2, name, background, fixed){
                var edge = new ht.Edge(n1, n2);
                edge.setName(name);
                edge.setStyle('edge.gap', 30);
                edge.setStyle('label.position.fixed', fixed);
                edge.setStyle('label.background', background);
                dataModel.add(edge);   
                return edge;
            }
        }
    },
}
</script>

<style>
    .main {
        margin: 0px;
        padding: 0px;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
</style>
